<template>
	<view>
		<u-navbar placeholder>
			<view slot="left">
			</view>
			<view slot="center" style="flex: 2; padding: 0 20rpx;">
				<u-search placeholder="快速搜索你想要的" v-model="keyword" :clearabled="true" :focus="true"
					@custom="SearchApk()" @search="SearchApk()"></u-search>
			</view>
			<view slot="right"></view>
		</u-navbar>
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" beforeEndDelay="2000" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="taglist">
				<block v-for="(app, appindex) in AppList" :key="appindex">
					<view class="newapk" @click="GoApk(app.id)">
						<view class="newicon">
							<u-image :src="app.appicon" width="125rpx" height="125rpx" radius="12" mode="widthFix"
								loadingIcon="hourglass"></u-image>
						</view>
						<view class="newdetail">
							<view class="newnum">
								<u-text :text="app.appname"></u-text>
							</view>
							<view class="newnum">
								<view>
									<u-rate v-if="app.appmod==0" :value="1" size="15" :count="1" readonly
										activeColor="#2469f6"></u-rate>
									<u-rate v-else-if="app.appmod==1" :value="1" size="15" :count="1" readonly
										activeColor="#1a9f35"></u-rate>
								</view>
								<view style="padding-top: 2px;">
									<u-text :text="app.appstar" v-if="app.appmod==0" size="13" color="#2469f6"></u-text>
									<u-text :text="app.appstar" v-if="app.appmod==1" size="13" color="#1a9f35"></u-text>
								</view>
								<u-text :text="app.appbb" size="13" style="margin-left: 10px;" color="#6c6c6c"></u-text>
							</view>
							<view class="newnum">
								<text class="nomod" v-if="app.appmod==0">原版</text>
								<text class="mod" v-else-if="app.appmod==1">MOD</text>
								<view>
									<u-text size="14" :text="app.appdata+'MB  · '+app.appdownnum+'次下载'" color="#6c6c6c"
										lines="1"></u-text>
								</view>
							</view>
						</view>
						<view class="newbtn">
							<u-tag text="下载" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6"
								shape="circle" @click="GoApk(app.id)"/>
						</view>
					</view>
				</block>
			</view>
		</mescroll-body>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import API from '../../util/request.js';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: '',
				AppList: [],
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
					autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
					isLock: false, // 是否锁定下拉刷新,默认false;
					offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
					inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
					bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
					minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
					beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
					bgColor: "#f9f9f9", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "#2469f6", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '加载中 ...' // 加载中的提示文本
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					isLock: false, // 是否锁定上拉加载,默认false;
					isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 60, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 60, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 暂无更多 --', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
						zIndex: 9990, // fixed定位z-index值
						left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
						width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "/static/nodata/post.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示                		
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					},
					onScroll: true, // 是否监听滚动事件
				},
			}
		},
		methods: {
			SearchApk() {
				this.AppList = [];
				if (this.keyword == '') {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入搜索词！'
					})
				} else {
					this.mescroll.resetUpScroll();
				}
			},
			//下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				var that = this;
				let pageNum = page.num; // 页码, 默认从1开始
				let limit = page.size;
				// console.log(that.sortapi)
				if(that.keyword==''){
					that.mescroll.endByPage(0, 0);
				}else{
					uni.request({
						url: API.GetApkList()+ '?appname=' + that.keyword + '&sortOrder=desc&page='+pageNum+'&limit=' +limit,
						success: (res) => {
							var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
							
							if (data.code == 200) {
								let curPageLen = data.data.length;
								if (page.num == 1) that.AppList = [];
								that.AppList = that.AppList.concat(data.data);
								that.mescroll.endByPage(curPageLen, data.msf);
							} else {
								that.mescroll.endByPage(0, 0);
							}
						},
						fail: (res) => {
							this.mescroll.endErr()
						}
					})
				}
			},
			//跳转软件页
			GoApk(id) {
				uni.navigateTo({
					url: '/pages/ruanher/ruanherview?appid=' + id
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}

	.taglist {
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.newapk {
		width: 100%;
		display: flex;
		margin-top: 6px;
		margin-bottom: 10px;
		justify-content: space-between;
	}

	.newicon {
		width: 125rpx;
		height: 125rpx;
		flex: 1;
		border-radius: 14px;
		border: #dcdcdc 1px solid;
	}

	.newdetail {
		flex: 4;
		margin-left: 0rpx;
		padding: 0rpx 16rpx 0rpx 16rpx;
		display: flex;
		flex-direction: column;
	}

	.newname {
		color: #000000;
		font-size: 18px;
		overflow: hidden;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.newcontent {
		color: #666666;
		font-size: 13px;
		overflow: hidden;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.newnum {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.nomod {
		padding: 4px 10rpx;
		margin-right: 16rpx;
		border-radius: 6px;
		background-color: #2469f6;
		font-size: 9px;
		color: #fff;
	}

	.mod {
		padding: 4px 10rpx;
		margin-right: 16rpx;
		border-radius: 6px;
		background-color: #1a9f35;
		font-size: 9px;
		color: #fff;
	}

	.newbtn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
</style>